<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
1. 绑定监听:
  v-on:xxx="fun"
  @xxx="fun"
  @xxx="fun(参数)"
  默认事件形参: event
  隐含属性对象: $event
2. 事件修饰符:
  .prevent : 阻止事件的默认行为 event.preventDefault()
  .stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
  .keycode : 操作的是某个keycode值的健
  .enter : 操作的是enter键
-->

<div id="example">

    <h2>1. 绑定监听</h2>
    <button @click='test1'>test1</button>
    <button @click="test2('zyy')">test1</button>
    <button @click="test3('zyy',$event)">test1</button>
    <h2>2. 事件修饰符</h2>
    <a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>
    <div style="width: 100px;height: 100px;background: red" @click="test5">
    <div style="width: 50px;height: 50px;background: blue" @click.stop="test6"></div>
    </div>
            <button @click.once='test7'>test7</button>

    <h2>3. 按键修饰符</h2>
    <!-- <input type="text" v-model="msg" @keyup.13='test8'> -->
    <input type="text" v-model="msg" @keyup.enter='test8'>
  </div>
  
  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">
    new Vue({
        el:'#example',
        data:{
            msg:''
        },
        methods: {
            test1(event){
                alert(event.target.innerHTML)
            },
            test2(name){
                alert(name)
            },
            test3(name,event){
                alert(name+'---'+event.target.innerHTML)
            },
            test4(){
                //event.preventDefault()
                alert('点击了链接')
            },
            test5(event){
                //event.preventDefault()
                alert('out')
            },
            test6(event){
                //event.preventDefault()
                alert('inner')
            },
            test7(event){
                //event.preventDefault()
                alert('once')
            },
            test8(event){
                //if(event.keyCode===13){
                    alert(this.msg)
               // }
                
            }
        },
    })
  </script>
</body>
</html>